<template>
    <div class="play-area" id="playArea">
        <div class="play-target" id="payTarget">
            <div class="page-module" id="pageModule-1">
                <cover></cover>
            </div>
            <div class="page-module" id="pageModule-2">
                <monitor :pageData="pageData1"></monitor>
            </div>
            <div class="page-module" id="pageModule-3">
                <industry :pageData="pageData2"></industry>
            </div>
            <div class="page-module" id="pageModule-4">
                <evaluation :pageData="pageData3"></evaluation>
            </div>
            <div class="page-module" id="pageModule-5">
                <channel :pageData="pageData4"></channel>
            </div>
            <div class="page-module" id="pageModule-6">
                <stage :pageData="pageData5"></stage>
            </div>
            <div class="page-module" id="pageModule-7">
                <engineer :pageData="pageData6"></engineer>
            </div>
            <div class="page-module" id="pageModule-8">
                <conscientiously :pageData="pageData7"></conscientiously>
            </div>
            <div class="page-module" id="pageModule-9">
                <end :hosId="hospitalId" :doReplay="doReplay"></end>
            </div>
        </div>
        <div class="loading">
            <div class="icon"></div>
        </div>
    </div>
</template>

<script type="text/javascript">
    import cover from './pages/report-cover.vue'
    import monitor from './pages/monitor-status.vue'
    import industry from './pages/industry.vue'
    import evaluation from './pages/evaluation.vue'
    import channel from './pages/channel.vue'
    import stage from './pages/stage.vue'
    import engineer from './pages/engineer.vue'
    import conscientiously from './pages/conscientiously.vue'
    import end from './pages/the-end.vue'

    import touch from '../assets/script/touch.min'
    import $ from 'jquery'
    export default {
        data () {
            return {
                global: null,
                isCanChange: true,
                pageLen: 9,
                globalStep:1,
                printSpeed:100,
                isMonitorDraw: false,
                isIndustryDraw: false,
            }
        },
        mounted () {
            this.doSlide()
            this.getData()
            this.clearMonitorStatusLine()
            this.clearIndustryLine()
            this.clearPrintText()
            this.doInsertMessage()
            console.log(this.getUrlParaObj()['hospitalId'])
        },
        created () {
            setTimeout(() => {
                this.removeLoading()
                $('#pageModule-1').addClass('showCurrentPageModule')
//                $('#pageModule-1').siblings('div.page-module').addClass('showCurrentPageModule')
            },2500)
        },
        computed: {
            pageData1: function () {
                if(this.global && this.global.data && this.global.data.length > 0){
                    return this.global.data[0]
                }
            },
            pageData2: function () {
                if(this.global && this.global.data && this.global.data.length > 0){
                    return this.global.data[1]
                }
            },
            pageData3: function () {
                if(this.global && this.global.data && this.global.data.length > 0){
                    return this.global.data[2]
                }
            },
            pageData4: function () {
                if(this.global && this.global.data && this.global.data.length > 0){
                    return this.global.data[3]
                }
            },
            pageData5: function () {
                if(this.global && this.global.data && this.global.data.length > 0){
                    return this.global.data[4]
                }
            },
            pageData6: function () {
                if(this.global && this.global.data && this.global.data.length > 0){
                    return this.global.data[5]
                }
            },
            pageData7: function () {
                if(this.global && this.global.data && this.global.data.length > 0){
                    return this.global.data[6]
                }
            },
            withDay: function () {
                if(this.global && this.global.data && this.global.data.length > 0){
                    return this.global.data[0].withDay
                }
            },
            hospitalId: function () {
                return this.getUrlParaObj()['hospitalId'] || 'ba036d228858d76fb89189853a5503bd'
            }
        },
        methods: {
            music () {
                document.addEventListener('DOMContentLoaded', function () {
                    function audioAutoPlay() {
                        var audio = document.getElementById(' musicid ');
                        audio.play();
                        document.addEventListener("WeixinJSBridgeReady", function () {
                            audio.play();
                        }, false);
                    }
                    audioAutoPlay();
                })
            },
            removeLoading () {
                $('.loading').css({display: 'none'})
            },
            doSlide () {
                let that = this
                var playArea = document.querySelector("#playArea");
//                touch.on('#payTarget', 'touchstart', function(ev){
//                    ev.preventDefault();
//                });
                var target = document.getElementById("payTarget");
                touch.on(target, 'swipeup swipeleft', function(ev){
                    that.toNextPage()
                });
                touch.on(target, 'swipedown swiperight', function(ev){
                    that.toPrePage()
                });
                touch.on('#payTarget', 'touchstart touchmove touchend', function(ev){
                    if(ev.type == 'touchend') {
                        that.isCanChange = true
                        console.log('当前步数：'+ that.globalStep)
                    }
                });
            },
            industryDrawLine () {
                console.log('画industry ')
                setTimeout(() => {
                    this.drawLine('svg-path-5','M220 5 l -120 0 l 0 180')
                },200)
            },
            monitorStatusDrawLine () {
                console.log('qingchu')
                setTimeout(() => {
                    this.drawLine('svg-path-1','M0 195 l 50 -40 l 0 -140')
                    this.drawLine('svg-path-2','M100 195 l -50 -40 l 0 -100')
                    this.drawLine('svg-path-3','M0 5 l 60 0 l 0 160')
                    this.drawLine('svg-path-4','M100 5 l -61 0 l 0 130')
                }, 500)
            },
            clearMonitorStatusLine () {
                setTimeout(() => {
                    let svg_1 = document.querySelector('#svg-path-1')
                    let svg_2 = document.querySelector('#svg-path-2')
                    let svg_3 = document.querySelector('#svg-path-3')
                    let svg_4 = document.querySelector('#svg-path-4')
                    if (svg_1) {
                        svg_1.setAttribute("d",'')
                        svg_1.setAttribute("style",'')
                    }
                    if (svg_2) {
                        svg_2.setAttribute("d",'')
                        svg_2.setAttribute("style",'')
                    }
                    if (svg_3) {
                        svg_3.setAttribute("d",'')
                        svg_3.setAttribute("style",'')
                    }
                    if (svg_4) {
                        svg_4.setAttribute("d",'')
                        svg_4.setAttribute("style",'')
                    }
                }, 2000)
            },
            clearIndustryLine () {
                console.log('清除industry')
                setTimeout( ()=> {
                    document.querySelector('#svg-path-5').setAttribute("d",'')
                    document.querySelector('#svg-path-5').setAttribute("style",'')
                }, 2000)
            },
            clearPrintText () {
                $('#text-1,#text-2,#num-1,#num-2,#unit-1').html('')
            },
            drawLine (id, d) {
                let path = document.querySelector('#'+id)
                if(!path) return
                path.setAttribute("d",d);
                let length = path.getTotalLength()
                path.style.transition = path.style.WebkitTransition = 'none'
                path.style.strokeDasharray = length + ' ' + length
                path.style.strokeDashoffset = length
                path.getBoundingClientRect()
                path.style.transition = path.style.WebkitTransition = 'stroke-dashoffset .6s ease-in-out .5s'
                path.style.strokeDashoffset = '0'
            },
            doPrint (id, text) {
                let dom = document.getElementById(id)
                let str = text
                let counter = 0
                let i = setInterval(function(){
                    dom.innerHTML = str.substr(0, counter)
                    counter++
                    if(counter === str.length + 1) {
                        clearInterval(i)
                    }
                }, 100)
            },
            typeMonitorDescription () {
                setTimeout(() => {
                    this.doPrint('text-1','云服陪伴您')
                } ,400)

                setTimeout(() => {
                    this.doPrint('num-1', this.withDay.toString())
                } ,1000)
                setTimeout(() => {
                    document.getElementById('unit-1').removeAttribute("hidden");
                    this.doPrint('unit-1','天')
                } , 1100)
                setTimeout(() => {
                    document.getElementById('unit-1').removeAttribute("hidden");
                    this.doPrint('num-2','15000')
                } , 1400)
                setTimeout(() => {
                    this.doPrint('text-2', ' 人陪您一起使用')
                } ,1600)
            },
            doPageAnimation () {
                let that = this
                let playArea = document.querySelector("#playArea");
                let target = document.getElementById("payTarget");
                if (that.globalStep == 2 && !that.isMonitorDraw) {
                    that.isMonitorDraw = true
                    that.monitorStatusDrawLine()
                    that.typeMonitorDescription()
                }
                if(that.globalStep != 2){
                    that.isMonitorDraw =false
                    that.clearMonitorStatusLine()
                    that.clearPrintText()
                }
                if(that.globalStep == 3 && !that.isIndustryDraw){
                    that.isIndustryDraw = true
                    that.industryDrawLine()
                }
                if(that.globalStep != 3) {
                    that.isIndustryDraw = false
                    that.clearIndustryLine()
                }
            },
            toNextPage () {
                let that = this
                if (that.isCanChange) {
                    that.globalStep = that.globalStep + 1
                    if (that.globalStep > that.pageLen) {
                        that.globalStep = that.pageLen
                    }
                    $('#pageModule-'+that.globalStep).addClass('showCurrentPageModule')
                    $('#pageModule-'+that.globalStep).siblings('div.page-module').removeClass('showCurrentPageModule')
                    that.doPageAnimation()
                    that.isCanChange = false
                }
            },
            toPrePage () {
                let that = this
                if (that.isCanChange) {

                    that.globalStep = that.globalStep -1
                    if (that.globalStep <= 0 ) {
                        that.globalStep = 1
                    }
                    $('#pageModule-'+that.globalStep).addClass('showCurrentPageModule')
                    $('#pageModule-'+that.globalStep).siblings('div.page-module').removeClass('showCurrentPageModule')
                    that.doPageAnimation()
                    that.isCanChange = false
                }
            },
            doReplay () {
                $('#pageModule-1').addClass('showCurrentPageModule xx')
                $('#pageModule-1').siblings('div.page-module').removeClass('showCurrentPageModule')
                this.globalStep = 1
            },
            getData () {
                let that = this
                let hospitalId = that.hospitalId
                $.ajax({
                    url:'http://121.42.187.170/h5/use?hospitalId='+encodeURIComponent(hospitalId),
                    method:'get',
                    success:function (res) {
                        that.global = res
                        console.log(res.data[7])
                        document.title = res.data[7] + '年度报告'

                    }
                })
            },
            doInsertMessage () {
                let that = this
                let time = new Date().getTime()
                let data = {
                    hospitalId: that.hospitalId,
                    time: time,
                    type:'打开'
                }
                $.ajax({
                    url:'http://121.42.187.170/h5/insertMess',
                    data:JSON.stringify(data),
                    method:'post',
                    contentType:'application/json',
                    success:function (res) {
                    }
                })
            },
            getUrlParaObj (k) {
                var search = location.search;
                if (search != "" && search.length >= 1) {
                    var search = search.split('?')[1];

                    var param = {};
                    var arr = search.split('&');
                    for (var k = 0, kk = arr.length; k < kk; k++) {
                        var d = arr[k].split('=');
                        param[d[0]] = decodeURI(d[1])
                    }
                }
                return param
            }
        },
        components: {cover,monitor,industry,evaluation,channel,stage,engineer,conscientiously,end}
    }
</script>

<style  lang='scss' rel="stylesheet/scss">
    .loading{
        width: 100%;
        height: 100%;
        background: #141D43;
        position: absolute;
        top:0;
        left: 0;
        z-index: 2000;
        .icon{
            width: 7rem;
            height: 7rem;
            position: absolute;
            background-image: url("../assets/images/loding.png");
            background-size: 100% 100%;
            top: 35%;
            left: 50%;
            margin-left: -3.5rem;
            animation: clockwise 2s linear infinite;
        }
    }
    .play-area{
        width: 100%;
        height: 100%;
        /*background: palegoldenrod;*/
        position: relative;
        .play-target{
            width: 100%;
            height: 100%;
            position: absolute;
            top:0;
            left: 0;
            z-index: 1990;
            .page-module{
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                z-index: 999;
                font-size: 10rem;
                overflow: hidden;
            }
            .showCurrentPageModule{
                z-index: 1001;
                background: url("../assets/images/monitor-bg.png");
            }
        }
    }
  .report-view-box{
    width: 100%;
    height: 100%;
    background: #ee6d6d;
  }
  .fp-tableCell{
    position: relative;
    overflow: hidden;
  }
  .page-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
  .publickPostion{
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
  }
  @font-face{
    font-family: 'DIGIT';
    src : url('../assets/font/DS-DIGIT.TTF');
  }
  html, body{
    font-family: 'Microsoft YaHei', 'heiti';
    color: #2eeec9;
    height: 100%;
    width: 100%;
    background: url("../assets/images/monitor-bg.png");
  }
  #app2{
    height: 100%;
    width: 100%;
  }
  *{
    margin: 0;
    padding: 0;
  }
  .clear:after{
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
  }
  .defaultBackground{
    background-image: url("../assets/images/monitor-bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
  }
  .defaultFontNum {
    color: #2eeec9;
    font-family: 'DIGIT';
  }
  .data-banner{
    background: url("../assets/images/banner.png");
    width: 100%;
    height: 7.2rem;
    background-size: 100% 100%;
    color: #0371f6;
    >p{
      &:nth-child(1){
        float: left;
        width: 44%;
        font-size: 2.2rem;
        padding-left: 12%;
        line-height: 6.5rem;
      }
      &:nth-child(2){
          float: left;
          font-family: 'DIGIT';
          width: 26.8%;
          font-size: 2.4rem;
          text-align: right;
          color: #2eeec9;
          line-height: 6.8rem;
      }
      &:nth-child(3){
        float: right;
        font-size: 1.8rem;
        width: 12%;
        text-align: left;
        line-height: 6.8rem;
      }
    }
  }
  @keyframes defaultOpacityAni{
    to {opacity: 1}
  }

  @keyframes defaultBottomZero{
    to {bottom: 0}
  }
  /*顺时针*/
  @keyframes clockwise{
    from{transform:rotate(0deg)}
    to{transform:rotate(360deg)}
  }
  /*逆时针*/
  @keyframes counterclockwise{
    from{transform:rotate(0deg)}
    to{transform:rotate(-360deg)}
  }
</style>
